<template>
    <div
        class="flex items-center gap-4px"
        :style="params.length !== 0 ? 'padding: 0 4px' : ''"
    >
        <n-tag v-for="(item, index) in params" :key="index">
            {{ item }}
        </n-tag>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import type { MeetingRoomSearchParams } from "@/service/api/types/room";

const props = defineProps<{
    searchParams: MeetingRoomSearchParams;
}>();

const params = ref<string[]>([]);

const roomStatusLabel = {
    normal: "正常",
    maintain: "维修中",
};

const roomTypeLabel = {
    classroom: "教室型",
    roundtable: "圆桌型",
};

const roomDeviceLabel = {
    internet: "互联网",
    projector: "投影仪",
    speaker: "扬声器",
};

watch(
    () => props.searchParams,
    (newVal) => {
        params.value = [];
        for (const k in newVal) {
            const key = k as keyof MeetingRoomSearchParams;
            if (
                newVal[key] === "" ||
                newVal[key] === 0 ||
                newVal[key] === null
            ) {
                continue;
            }
            switch (key) {
                case "name":
                    params.value.push(`名称: ${newVal[key]}`);
                    break;
                case "area":
                    params.value.push(`面积: ${newVal[key]}`);
                    break;
                case "capacity":
                    params.value.push(`座位数: ${newVal[key]}`);
                    break;
                case "status":
                    params.value.push(
                        `${
                            roomStatusLabel[
                                newVal[key] as keyof typeof roomStatusLabel
                            ]
                        }`
                    );
                    break;
                case "type":
                    params.value.push(
                        `${
                            roomTypeLabel[
                                newVal[key] as keyof typeof roomTypeLabel
                            ]
                        }`
                    );
                    break;
                case "device": {
                    const device = newVal[key] as {
                        speaker: boolean;
                        projector: boolean;
                        internet: boolean;
                    };
                    Object.entries(device).forEach(([key, value]) => {
                        if (value) {
                            params.value.push(
                                `${
                                    roomDeviceLabel[
                                        key as keyof typeof roomDeviceLabel
                                    ]
                                }`
                            );
                        }
                    });
                    break;
                }
            }
        }
    }
);
</script>

<style scoped></style>
